<!--
 * @Author: 赵宇
 * @Description: 
 * @Date: 2023-04-17 10:54:15
 * @LastEditTime: 2023-04-18 16:26:02
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \pcj\src\page\product\components\productDialog.vue
-->
<template>
  <el-dialog draggable v-model="dialog.show" width="80%" top="50px" title="选择商品" :before-close="handleClose" class="custom-dialog">
    <div class="flexible product">
      <ul class="header-buttons">
        <li>
          <z-button title="刷新" icon="refresh" color="#40485b" @click="pageQuery"> </z-button>
        </li>
        <li class="dis-flex">
          <p>
            <el-input v-model="params.keyword" v-debounce="pageQuery" @clear="pageQuery" placeholder="支持名称模糊搜索" clearable class="mr-10"></el-input>
          </p>
          <el-button-group class="ml-10">
            <columnSetting v-model="table.columns" name="Product/GetPage" />
          </el-button-group>
        </li>
      </ul>
      <el-table
        :data="table.data"
        class="flexible-table"
        ref="tableRef"
        border
        stripe
        @selection-change="onTableChange"
        @row-click="onCellClick"
        tooltip-effect
      >
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column
          v-for="(item, index) in table.columns.filter(r => r.show)"
          :width="item.width"
          :min-width="item.minWidth"
          :prop="item.id"
          :label="item.label"
          :key="item.id + index"
          show-overflow-tooltip
          align="center"
        >
          <template #default="scope">
            <template v-if="item.id === 'operate'"> </template>
            <template v-else-if="item.id === 'number'">
              <z-input v-model="scope.row[item.id]" v-focus v-if="scope.row.active"></z-input>
              <template v-else>
                {{ scope.row[item.id] }}
              </template>
            </template>
            <template v-else>
              {{ scope.row[item.id] }}
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="flexible-pagination">
        <el-pagination
          v-model:current-page="params.pageIndex"
          v-model:page-size="params.pageSize"
          :page-sizes="[10, 30, 60, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="table.totalCount"
          @size-change="handleSizeChange"
          @current-change="pageQuery"
        />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <z-button type="" @click="handleClose" icon="close">取消</z-button>
        <z-button icon="check" @click="onCheck" :disabled="!table.selection.length" :loading="dialog.loading"> 确认 </z-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { post } from '@/api/index';
let emit = defineEmits(['update:modelValue', 'onSave']);
let table = reactive({
  columns: [
    { label: '产品名称', id: 'productName', show: true, minWidth: 150 },
    { label: '产品编号', id: 'productSerialNo', show: true, minWidth: 180 },
    { label: '产品类型', id: 'productTypeName', show: true, width: 100 },
    { label: '产品分类', id: 'categoryName', show: true, minWidth: 100 },
    { label: '单价', id: 'price', show: true, width: 80 },
    { label: '单位', id: 'unit', show: true, width: 80 },
    { label: '预警库存', id: 'warnNumber', show: true, width: 100 },
    { label: '状态', id: 'statusName', show: true, width: 80 },
    { label: '备注', id: 'note', show: true, minWidth: 100 },
    { label: '数量', id: 'number', show: true, required: true },
    { label: '操作', id: 'operate', show: true, required: true }
  ],
  data: [],
  totalCount: 0,
  selection: []
});
let tableRef = ref();
let dialog = reactive({
  show: false,
  loading: false
});
let props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});
watch(
  () => props.modelValue,
  val => {
    dialog.show = val;
    if (!val) return;
    pageQuery();
  },
  { immediate: true }
);
// 关闭
const handleClose = () => {
  emit('update:modelValue', false);
};

// 点击确认
const onCheck = () => {
  emit('onSave', table.selection);
  emit('update:modelValue', false);
};

let params = reactive({
  pageIndex: 1,
  pageSize: 30,
  keyword: ''
});
const pageQuery = async () => {
  let { result } = await post('Product/GetPage', params);
  table.data = result.items.map(r => {
    return {
      ...r,
      ...{
        statusName: ['禁用', '启用'][r.statusId]
      }
    };
  });
  if (result.columnJson) {
    result.columnJson = JSON.parse(result.columnJson);
    table.columns = table.columns.map(r => {
      return { ...r, ...result.columnJson.find(row => row.id === r.id), value: r.value };
    });
  }
  table.totalCount = result.totalCount;
};

const onTableChange = val => {
  table.selection = val;
};
const handleSizeChange = val => {
  params.pageIndex = 1;
  pageQuery();
};
const onCellClick = val => {
  tableRef.value.toggleRowSelection(val);
  val.active = !!table.selection.find(r => r.id === val.id);
};
</script>

<style lang="scss" scoped>
.product {
  background-color: #fff;
}

.header-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
</style>
